FI-AE 13 Frontend-Grundlagen — HTML, CSS, JavaScript (EN)

FI-AE 13 Frontend Fundamentals — HTML, CSS, JavaScript

In this module, you will learn the fundamentals of modern web development. You will understand how semantic HTML forms the structure of a web page, how CSS creates appealing layouts with Flexbox and Grid, and how JavaScript enables interactivity. You will master DOM manipulation, understand the Event Loop, and be able to use Promises for asynchronous operations.

Concepts and Background

Semantic HTML

Using HTML tags according to their meaning rather than just their appearance to improve accessibility and SEO.

CSS Flexbox

One-dimensional layout model that allows elements to be flexibly arranged in a row or column and dynamically adjusted.

CSS Grid

Two-dimensional layout model that enables complex webpage layouts with rows and columns, providing precise control over positioning.

DOM Manipulation

The dynamic modification of the Document Object Model (DOM) with JavaScript to change the content, structure, or styles of a web page at runtime.

Event Loop

The central execution mechanism in JavaScript that enables asynchronous operations through callback functions, Promises, and async/await.

Practical Steps

1. Create a basic HTML structure with semantic tags like header, main, section, and footer. This improves accessibility and SEO.
2. Define CSS rules for a Flexbox layout to horizontally center and evenly distribute navigation elements.
3. Implement a CSS Grid layout for a responsive image gallery that automatically adjusts to different screen widths.
4. Select a DOM element and change its content with JavaScript document.getElementById().textContent = 'New Text'.
5. Add an Event Listener to respond to user clicks: element.addEventListener('click', function() { alert('Click detected'); });
6. Implement an asynchronous function with Promises to fetch data from an API: fetch('https://api.example.com/data').then(response => response.json()).then(data => console.log(data));
7. Use async/await for cleaner asynchronous programming: const data = await fetch('https://api.example.com/data').then(response => response.json());
8. Validate form inputs with JavaScript before submission to improve user experience.

Common Pitfalls

Further Resources

• MDN Web Docs - HTML
• CSS-Tricks - Complete Guide to Flexbox
• MDN Web Docs - Promises
• JavaScript.info - Document Object Model
• CSS-Tricks - Complete Guide to Grid

Knowledge Check

Four questions for self-assessment. Click on each question to see the correct answer and explanation.

Which of the following HTML tags is semantically correct for grouping navigation elements in a web document?

• A) <div>
• B) <nav>
• C) <menu>
• D) <navbar>

Correct Answer: B. The <nav> tag is specifically intended for navigation elements, while <div> is generic, <menu> is obsolete, and <navbar> is not a valid HTML tag.

Which CSS property must be set in a Flexbox container to align elements vertically?

• A) align-items
• B) justify-content
• C) flex-direction
• D) flex-wrap

Correct Answer: A. align-items controls the vertical alignment of flex items, while justify-content controls horizontal alignment, flex-direction determines the axis orientation, and flex-wrap regulates element wrapping.

What is the main purpose of DOM manipulation in JavaScript?

• A) Establish database connections
• B) Dynamically change the structure and content of a web page
• C) Predefine CSS styles
• D) Perform server-side operations

Correct Answer: B. DOM manipulation enables dynamic changes to a web page's content and structure, while the other options cover different task areas.

How is an asynchronous function with Promises properly completed when an error occurs?

• A) .catch()
• B) .then()
• C) .finally()
• D) .error()

Correct Answer: A. .catch() is used to handle errors in a Promise chain, while .then() serves for successful resolutions, .finally() always executes, and .error() is not a valid method.